import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import VideoSearch from "./videoSearch";
import { PageVo, Video, VideoQueryVo } from "@api/model";
import { remove, getById, update, save } from "@api/video";
import videoSearch from "./videoSearch";
import { uploadFile } from "@api/teacher";
// 表单的数据类型
interface VideoForm {
    title: string
    //原始文件名
    videoOriginalName: string
    //封面
    url: string
    isFree: number
    //课程id,章节id
    courseId: string,
    chapterId: string,
    sort: number
}

// 表单的响应式数据
const videoFormReactive = reactive<{ videoForm: VideoForm }>({
    /*
       为了给reactive对象赋值，需要将对象定义为其中的一个属性。
      */
    videoForm: {
        title: "",
        //原始文件名
        videoOriginalName: "",
        //封面
        url: "",
        isFree: null,
        //课程id,章节id
        courseId: "666",
        chapterId: "666",
        sort: 1,
    },
});

export default function videoForm() {
    // 获取列表数据
    const { getVideoDataList } = VideoSearch();

    const uploadVisible = ref(false);
    const dialogVisible = ref(false);
    const isEdit = ref(false);
    const currentVideo = ref("");
    // 重置表单
    function resetVideoForm() {
        videoFormReactive.videoForm = {
            title: "",
            //原始文件名
            videoOriginalName: "",
            //封面
            url: "",
            isFree: null,
            //课程id,章节id
            courseId: "666",
            chapterId: "666",
            sort: 1,
        };
    }
    function addVideo() {
        // 设置当前不是编辑模式：true代表添加  false代表更新
        isEdit.value = false
        // 开启输入框
        uploadVisible.value = true
    }


    // 修改
    function editVideo(id: string) {
        getById(id).then((video: any) => {
            // 将请求响应的数据赋值给绑定了表单的响应式对象
            videoFormReactive.videoForm = video.data;
            // 设置弹窗为编辑模式
            isEdit.value = true;
            // 显示弹窗
            uploadVisible.value = true;
        });
    }


    // 删除完成后，马上更新列表界面
    async function delVideo(id: string) {
        await ElMessageBox.confirm("确定要删除当前视频？", "提示", {
            type: "warning",
        }).then(() => {
            remove(id).then(() => {
                ElMessage.success("删除成功");
                getVideoDataList();
            });
        }).catch(() => { });
    }

    /*
     提交表单
     1. 校验表单
     2. 判断提交类型
     3. 新增或修改
     */
    // 获取当前组件实例对象
    const currentInstance = getCurrentInstance();
    function submit(event: MouseEvent) {
        (currentInstance?.refs.videoFormRef as any).validate((valid: boolean) => {
            if (!valid) {
                return;
            }
            // 只有校验成功才会执行提交操作
            // 判断是编辑还是保存
            if (isEdit.value) {
                // 更新数据
                update(videoFormReactive.videoForm as Video)
                    .then((resp: any) => {
                        ElMessage.success(resp);
                        uploadVisible.value = false;
                        // 更新视图
                        getVideoDataList();
                    })

            } else {
                // 添加数据
                save(videoFormReactive.videoForm as Video)
                    .then((resp: any) => {
                        ElMessage.success(resp);
                        uploadVisible.value = false;
                        // 更新视图
                        getVideoDataList();
                    })
            }
        });
    }
    function videoUpload() {
        uploadVisible.value = true;
    }
    function videoRun(videoOriginalName: string) {
        currentVideo.value = videoOriginalName;
        console.log("文件名:" + videoOriginalName);
        dialogVisible.value = true;
    }
    // 封面文件上传
    function cutDown(cutImage: { file: File }) {
        // 从解构的对象中获取文件传给上传api
        uploadFile([cutImage.file]).then(fileName => {
            // 成功回调就是图片的地址
            // 将地址保存的表单数据对象中，在表单提交数据时就已经有图片地址了
            videoFormReactive.videoForm.url = fileName
            ElMessage.success("上传成功")
        })
    }
    // 视频文件上传
    function videoFileUpload(cutImage: { file: File }) {
        // 从解构的对象中获取文件传给上传api
        uploadFile([cutImage.file]).then(fileName => {
            // 成功回调就是图片的地址
            // 将地址保存的表单数据对象中，在表单提交数据时就已经有图片地址了
            videoFormReactive.videoForm.videoOriginalName = fileName
            ElMessage.success("上传成功")
        })
    }
    const dialogVideoUrl = ref("");
    return {
        currentVideo,
        resetVideoForm,
        ...toRefs(videoFormReactive),
        delVideo,
        editVideo,
        addVideo,
        submit,
        //fileList,
        videoUpload,
        videoRun,
        uploadVisible,
        dialogVisible,
        cutDown,
        videoFileUpload
    };
}